<template>
	<view v-if="order.goods">
		<view class="address_box" @click="chooseAddress">
			<u-section v-if="order.address== undefined || order.address.length <= 0" :bold="false" :show-line="false" 
			:arrow="true" :right="false" sub-title="" sub-color="#000" 
			title="请选择收货地址" 
			color="#909399"></u-section>
			<view v-else> 
				<view style="margin-bottom: 20rpx;">
					<text class="userInfo">{{order.address.real_name}}</text>
					<text class="userInfo">{{order.address.phone}}</text>
					<u-tag v-if="order.address.is_default == '1'" class="userInfo" bg-color="#20cbd4" text="默认" size="mini" mode="dark" />
				</view>
				<view class="addressDetail">{{order.address.province}}{{order.address.city}}{{order.address.district}}{{order.address.detail}}</view>
			</view>
		</view>
		<view class="address_line"></view>
		<view class="goods_box">
			<view class="goods_item">
				<view class="goods_img">
					<image :src="order.goods.goods_image"></image>
				</view>
				<view class="goods_info">
					<view class="goods_tit u-line-2">{{order.goods.goods_name}}</view>
          <view class="goods_tit goods_norms u-line-1">{{order.goods.goods_sku.goods_attr}}</view>
					<view class="buy_info">
						<view style="color: #FA3534;">{{order.detail.points}}积分</view>
						<view>x{{order.num}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="form">
			<u-cell-group style="padding: 30rpx;">
				<u-cell-item title="备注" :arrow="false">
					<u-input v-model="remark" slot="right-icon" input-align="right" placeholder="建议留言前先与卖家沟通"/>
				</u-cell-item>
				<u-cell-item title="商品积分" :arrow="false" :value-style="{color:'#fa3534'}" :value="order.total_price"></u-cell-item>
				<u-cell-item title="运费" :arrow="false" :value-style="{color:'#fa3534'}" :value="order.express_price"></u-cell-item>
			</u-cell-group>
			
		</view>
		<view class="footer">
			<view class="totalNumber">共1件</view>
			<view>合计:<text style="color: #FA3534;">{{order.pay_price}}积分</text></view>
			<view class="btn u-line-1" @click="settleNew">结算</view>
		</view>
		
		<u-modal v-model="modalShow" :show-cancel-button="true" title="支付方式"
			:cancel-style="{color:'#909399'}" @confirm="payConfirm">
			<view class="slot-content">
				<view class="payTime">
					<view>支付剩余时间：</view>
					<view>
						<u-count-down :font-size="25" color="#909399" 
							:separator-size="25" separator-color="#909399"
						:timestamp="3000"></u-count-down>
					</view>
				</view>
				<view class="modelPrice">{{order.pay_price}}</view>
				<u-cell-group :border="false">
					<u-cell-item :border-bottom="false" icon="rmb-circle-fill" :icon-style="{color:'#fece0a'}"
					:icon-size="60" title="兑换积分支付" :arrow="false">
						<u-radio-group :size="40" v-model="payType" @change="radioChange" active-color="#f37b1d">
							<u-radio name="dh" :icon-size="40">
							</u-radio>
						</u-radio-group>
					</u-cell-item>
				
				
				</u-cell-group>
			</view>
		</u-modal>
		<u-modal width="80%" v-model="payPwdShow" :show-title="true"
		confirm-color="#20cbd4" :show-cancel-button="true" @confirm="payYE">
			<view class="modelContent">
				<view class="accountData">
					<text>交易密码：</text>
					<u-input v-model="payPassword" type="password"
						placeholder="请输入交易密码"/>
				</view>
			</view>
		</u-modal>
		<login-model ref="loginModel"></login-model>
		<u-toast ref="uToast" />
		<hoverMenu></hoverMenu>
	</view>
</template>

<script>
	import hoverMenu from "@/components/public/sa-hover-menu.vue";
	import {exchangeOrder,exchangePay,presellPayZfb,presellHjVxPay,presellPayGzh,presellPayH5,wxminiGetOpenid} from "@/common/api.js";
	import loginModel from "@/components/public/loginModel.vue";
	export default {
		components: {
			loginModel,
			hoverMenu
		},
		data() {
			return {
				// address:null
				order:{},
				remark:"",
				modalShow:false,
				payPwdShow:false,
				payType:"dh",
				params:{},
				address_id:"",
				payPassword:"",
				alipayForm:"",
				sweixin:'',
				roomid:0,
			}
		},
		onReady() {
		},
		onLoad(option){
			 this.params = option|| {};
			 if(uni.getStorageSync("roomid")){
				var roomtime=uni.getStorageSync("roomtime");
				var roomnow=Date.now();
				var room_times=roomnow-roomtime;
				if(room_times&&room_times<3600000){//1小时
					this.roomid=uni.getStorageSync("roomid");
				}
			 }
		},
		onShow() {
			//判断选择地址
			let address = uni.getStorageSync('address')|| '';
			if(address != ''){
				this.address_id = address.id;
			}
			this.findOrder();
		  },
		methods: {
			floatTouchClick(index){
				this.$uniApi.floatTouch(index);
			},
			//查询订单信息
			findOrder(){
				exchangeOrder(this,{active_id:this.params.active_id,num:this.params.num,address_id:this.address_id,goods_sku_id:this.params.goods_sku_id})
			},
			chooseAddress(){
				uni.setStorageSync("adType","select");
				uni.navigateTo({
					url: '/user/address?type=select'
				 });
			},
			radioChange(e) { 
				this.payType = e;
			},
			settleNew(){
				this.modalShow=true;
			},
			//结算
			settle(){
				var _this=this;
				if(_this.order.address== undefined || _this.order.address.length <= 0){
					_this.$refs.uToast.show({title: '请选择收货地址',})
					return;
				}
				/*
				 * presellPay 小程序支付
				 * presellPayZfb  支付宝支付 （APP、H5）
				 * presellHjVxPay 微信APP支付 （兼容汇聚和官方）
				 * presellPayGzh 公众号支付
				 * presellPayH5  H5支付
				 */
				_this.modalShow=false;
				if(_this.payType=='dh'){
					if(this.payPassword==""){
						this.payPwdShow=true;
					}else{
						this.payYE();
					}
					return;
				}
				
				
				
			},
			payYE(){
				uni.showLoading({
					title: '支付中...'
				});
				this.payPwdShow=false;
				var pay_pwd=this.payPassword;
				this.payPassword="";
				exchangePay(this,{pay_type:'dh',active_id:this.params.active_id,goods_sku_id:this.params.goods_sku_id,num:this.params.num,address_id:this.order.address.id,remark:this.remark,roomid:this.roomid,pay_pwd:pay_pwd})
			},
			payConfirm(){
				this.settle();
				return;
			}
		}
	}
</script>

<style>
	page{
		font-family: PingFang SC;
		background: #f6f6f6;
	}
	.address_line{
		height: 8rpx;
		background-image: url("https://yunxingzhan.oss-cn-hangzhou.aliyuncs.com/miniprogram/images/images/address_line.png");
		background-size: 100% 100%;
		background-position: 0% 0%;
		background-repeat: no-repeat no-repeat;
		margin-bottom: 10rpx;
	}
	.address_box{
		padding: 40rpx 20rpx;
		background-color: #fff;
	}
	.userInfo{
		margin-right: 10rpx;
	}
	.addressDetail{
		color: #909399;
	}
	.goods_box{
		padding: 20rpx;
		background-color: #fff;
	}
	.goods_item{
		display: flex;
		padding: 20rpx 0;
	}
	.goods_img{
		width: 200rpx;
		height: 200rpx;
		margin-right: 10rpx;
	}
	.goods_img image{
		width: 100%;
		height: 100%;
	}
	.goods_info{
		width: 540rpx;
	}
	.goods_tit{
		margin-bottom: 20rpx;
	}
	.goods_norms{
		font-size: 25rpx;
		color: #909399;
		margin-bottom: 20rpx;
	}
	.buy_info{
		display: flex;
		justify-content: space-between;
	}
	.form{
		margin-top: 10rpx;
		padding: 0 20rpx;
		background-color: #fff;
	}
	.footer{
		position: fixed;
		bottom: 0;
		background-color: #fff;
		height: 100rpx;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		padding: 0 20rpx;
	}
	.totalNumber{
		color: #909399;
		margin-right: 10rpx;
	}
	.btn {
		background: linear-gradient(90deg,#6de3e9,#a0edf1);
		line-height: 66rpx;
		padding: 0 80rpx;
		border-radius: 36rpx;
		color: #ffffff;
		text-align: center;
		margin-left: 20rpx;
	}
	.slot-content{
		padding: 20rpx 40rpx;
	}
	.slot-content .u-radio{text-align: right;float:right !important}
	.payTime{
		padding: 0 40rpx;
		color: #909399;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 25rpx;
	}
	.modelPrice{
		color: #FA3534;
		font-size: 50rpx;
		font-weight: 650;
		padding: 0 60rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.modelContent{
		padding: 40rpx;
	}
	.accountData{
		padding: 15rpx 0 15px 200rpx;position: relative;
	}
	.accountData text{position: absolute;left:0;top:15px;display: inline-block;width:190rpx;text-align: right;}
	.accountData .u-input{border-bottom:0.5rpx solid #222;}
	.accountData .u-input input{min-width:260rpx}
</style>
